<template>
	<el-row style="margin: 5px 0">
		<el-col>
			<el-alert show-icon :title="'公告: ' + notice" type="success" />
		</el-col>
	</el-row>
	<el-row :gutter="20">
		<el-col :sm="6" :xs="12">
			<el-card>
				<div>
					<span><el-icon><User /></el-icon> 总用户</span>
					<el-button class="button" text>3075</el-button>
				</div>
			</el-card>
		</el-col>
		<el-col :sm="6" :xs="12">
			<el-card>
				<div>
					<span><el-icon><Goods /></el-icon> 总销售额</span>
					<el-button class="button" text>24075</el-button>
				</div>
			</el-card>
		</el-col>
		<el-col :sm="6" :xs="12">
			<el-card>
				<div>
					<span><el-icon><Star /></el-icon> 总评论</span>
					<el-button class="button" text>1590</el-button>
				</div>
			</el-card>
		</el-col>
		<el-col :sm="6" :xs="12">
			<el-card>
				<div>
					<span><el-icon><ChatLineSquare /></el-icon> 近七天访客</span>
					<el-button class="button" text>567</el-button>
				</div>
			</el-card>
		</el-col>
	</el-row>

	<el-row :gutter="20" style="margin-top: 10px">
		<el-col :sm="18" :xs="24">
			<el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%">
				<el-tab-pane label="热门产品" name="caiping">
					<el-card>
						<div id="drawHotCai" style="width: 100%; height: 400px"></div>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="热门事件" name="hotEvent">
					<el-card>
						<div id="mypie" style="width: 1000px; height: 400px"></div>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="价格走势" name="hotPrice">
					<el-card>
						<div id="drawHotProduct" style="width: 1000px; height: 400px"></div>
					</el-card>
				</el-tab-pane>
			</el-tabs>
		</el-col>
		<el-col :sm="6" :xs="24" style="margin-top: 40px">
			<el-card style="height: 450px">
				<template #header>
					<div>
						<span>日志消息</span>
					</div>
				</template>

				<!--我这个需求是有消息时才会让这个功能显示，所以使用了v-if-->
				<!-- <div class="bs-sysMsg" v-if="logList && logList.length > 0">
					<div class="msg__content">
						<el-carousel direction="vertical" indicator-position="none" :autoplay="true" type="card">
							<el-carousel-item v-for="item in logList" :key="item.l_id">
								<span v-html="item.content" ></span>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div> -->
				<el-scrollbar height="330px">
					<ul>
						<li v-for="item in logList" :key="item.l_id">
							<span v-html="item.content"></span>
						</li>
					</ul>
				</el-scrollbar>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import { useHome, useMessage } from '@/hooks/home'
const { activeName, handleClick } = useHome()
const { logList, notice } = useMessage()
</script>

<style scoped>
/*轮翻消息*/
.bs-sysMsg {
	position: relative;
	display: flex;
	width: 100%;
	padding: 8px 12px;
	margin-bottom: 10px;
	border-radius: 2px;
	color: #434342;
	/* background-color: #fdf6ec; */
	overflow: hidden;
	opacity: 1;
	align-items: center;
	transition: opacity 0.2s;
}
.bs-sysMsg .msg__content {
	display: table-cell;
	padding: 0 8px;
	width: 100%;
}
.bs-sysMsg .msg__content span.item {
	color: #e6a23c;
	font-size: 14px;
	opacity: 0.75;
}
.bs-sysMsg .msg__content a.item:hover {
	text-decoration: underline;
}

.notice {
	font-size: 12px;
}
</style>
